<template>
  <el-dialog draggable overflow :title="titleMap[mode]" v-model="visible" :width="1000" destroy-on-close
    @closed="$emit('closed')">


    <el-form :model="form" :rules="rules" ref="dialogForm" label-width="70px">
      <el-row>
        <el-col :span="24">
          <el-row>
            <el-col :span="6">
              <el-form-item label="计划号" prop="code">
                <el-input v-model="form.code" disabled placeholder="自动生成"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单据日期" prop="billdate">
                <el-date-picker v-model="form.billdate" type="date" placeholder="选择单据日期" :disabled-date="disabledDate" />
              </el-form-item>
            </el-col>

          </el-row>
        </el-col>
        <el-col :span="6">
          <el-form-item label="派车单" prop="car_id">
            <skAutoChoose v-model="form.car.code" :name="'car'" :assign="form" @select="selectCar">
            </skAutoChoose>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运输商" prop="car.company_id">
            <el-row>
              <el-col :span="12">
                <skAutoChoose v-model="form.car.company.name" :name="'factory'" :asKey="'company_id'" :assign="form.car"
                  :params="[{ category_id: 54 }]">
                </skAutoChoose>
              </el-col>
              <el-col :span="12">
                <el-input v-model="form.car.amount" clearable placeholder="运费"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="搬运单" prop="carry_id">
            <skAutoChoose v-model="form.carry.code" :name="'carry'" :assign="form" @select="selectCarry">
            </skAutoChoose>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="搬运人" prop="carry.company_id">
            <el-row>
              <el-col :span="12">
                <skAutoChoose v-model="form.carry.company.name" :name="'factory'" :asKey="'company_id'" :assign="form.carry"
                  :params="[{ category_id: 55 }]">
                </skAutoChoose>
              </el-col>
              <el-col :span="12">
                <el-input v-model="form.carry.amount" clearable placeholder="装卸费"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <sc-VxeTable :tablecode="'pro_outsourcing_finish_save'" :data="form.details" :gridEvts="gridEvts"
      :gridOps="gridSubOpts" ref="subbe" :sortable="true">
    </sc-VxeTable>
    <!-- </sc-water-mark> -->
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
  <skBrowserChoose v-model="openChooseDlg" :name="'outsourcing_storage_browser'" @close="openChooseDlg = false"
    @select="additems">
  </skBrowserChoose>
</template>
<script>
import tool from '@/utils/tool';
import skAutoChoose from "@/components/skAutoChoose";
import skBrowserChoose from "@/components/skBrowserChoose";
// import XEUtils from "xe-utils";
export default {
  emits: ["success", "closed"],
  components: { skAutoChoose, skBrowserChoose },
  data() {
    return {
      mode: "add",
      form: {
        billdate: tool.SYS_DATE(),
        car: { company: {} },
        carry: { company: {} },
        outfactory: {},
        bom: {},
        details: []
      },
      openChooseDlg: false,
      gridEvts: {
        choose: () => (this.openChooseDlg = true),
      },
      gridSubOpts: {
        height: 350,
        columns: [
          {
            field: 'auxiliary_quantity',
            event: {
              keyup: ({ row }) => {
                row['quantity'] = row['auxiliary_quantity'] * 25;
                row['amount'] = row['quantity'] * row['price'];
              },
            },
          },
          {
            field: 'quantity',
            event: {
              keyup: ({ row }) => {
                row['amount'] = row['quantity'] * row['price'];
              },
            },
          },
          {
            field: 'price',
            event: {
              keyup: ({ row }) => {
                row['amount'] = row['quantity'] * row['price'];
              },
            },
          },
        ],
      },
      titleMap: {
        add: "新增",
        edit: "编辑",
      },
      rules: {
        outfactory_id: { required: true, message: "加工厂必填" },
        bom_id: { required: true, message: "工艺必选" },
        billdate: { required: true, message: "单据日期必填" },
      },
      visible: false,
      isSaveing: false,
    };
  },
  mounted() {

  },
  methods: {
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    selectCarry(data) {
      if (typeof data.code == "undefined") {
        data = { company: {} };
        this.form.carry_id = 0;
      }
      this.form.carry = data;
    },
    selectCar(data) {
      if (typeof data.code == "undefined") {
        data = { company: {} };
        this.form.car_id = 0;
      }
      this.form.car = data;
    },
    additems(items) {
      this.openChooseDlg = false;
      items.map((row) => {
        row["old_location_id"] = row['location_id'];
        row["company_id"] = row.location.outfactory_id;
        delete row.id; delete row.location_id;
        row["md_auxiliary_quantity"] = row["auxiliary_quantity"] = parseFloat(row["available_auxiliary_quantity"]).toFixed(2);
        row["md_quantity"] = row["quantity"] = parseFloat(row["available_quantity"]).toFixed(2);
        this.form.details.push(row);
        return row;
      });
    },
    disabledDate(time) {
      return time.getTime() > Date.now()
    },

    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          var res = await this.$API.pro.outsourcing.finish.save.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit("success", this.form);
            this.visible = false;
            this.$message.success("操作成功");
          }
        }
      });
    },
    async getInfo(code) {
      var res = await this.$API.pro.outsourcing.finish.info.get({
        filter: [{ code: code }],
      });
      if (res.code == 200) {
        Object.assign(this.form, tool.removeNull(res.data));
      }
    },

    //表单注入数据
    setData(data) {
      this.getInfo(data.code);
    },
  },
};
</script>

<style>
.attachments .el-upload--picture-card,
.attachments .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
  overflow: hidden;
}
</style>
